<%--
  Created by IntelliJ IDEA.
  User: 柳胜酉
  Date: 2023/4/21
  Time: 19:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>管理员添加供货商页面</title>
  <link href="${pageContext.request.contextPath}/statics/style/css/Site.css" rel="stylesheet" type="text/css"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/zy.layout.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/zy.form.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/index.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/add.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/zy.menu.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/zy.all.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/amazeui.min.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/statics/style/css/admin.css" rel="stylesheet"/>
</head>
<script src="${pageContext.request.contextPath}/statics/scripts/jquery-3.6.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/scripts/Jqueryplugs.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/scripts/_layout.js" type="text/javascript"></script>
<body style="background: #F8F8F8">
<div style="position: absolute; left: 180px; right: 10px;">
  <%--                <iframe src="#" scrolling="no" width="100%" height="1200" name="right" border="none"></iframe>--%>
  <div class="dvcontent">
    <div>
      <div class="tabs">
        <div class="hd">
          <ul>
            <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">
              <input type="button" id="btn_add" value="确认新增">
            </li>
          </ul>
        </div>
        <div class="bd">
          <ul style="display: block;padding: 20px;">
            <li>
              <!--分页显示角色信息 start-->
              <div id="dv1">
                <table class="table" id="tbRecord">
                  <thead>
                  <th>供货商名</th>
                  <th>地址</th>
                  <th>电话</th>
                  <th>增加</th>
                  <th>移除</th>
                  </thead>
                  <tbody id="data">
                  <tr>
                    <td>
                      <label>
                        <input type="text" name="supplier_name" id="supplier_name">
                      </label>
                    </td>
                    <td><label>
                      <input type="text" name="address" id="address">
                    </label></td>

                    <td><label>
                      <input type="text" name="phone" id="phone">
                    </label></td>

                    <td><input type="button" value="+" onclick="addElement(this);"></td>
                    <td><input type="button" value="-" onclick="delElement(this)"></td>

                  </tr>
                  </tbody>
                </table>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="copyrights" id="copyrights">
      &copy; 2023 madballpad All rights reserved. <a
            href="tencent://Message/?Uin=842294358&websiteName=www.oicqzone.com&Menu=yes" title="版权信息">
      联系管理员</a>
    </div>
  </div>
</body>
<script type="text/javascript">
  //批量添加
  $("#btn_add").click(function () {
    let data = [];
    //循环tbody里面所有的tr，并取出每行相对的值,填充到数组中
    $("#data tr").each(function (index, obj) {
      data.push({
        supplier_name: $("input[name='supplier_name']", obj).val(),
        address: $("input[name='address']", obj).val(),
        phone: $("input[name='phone']", obj).val(),
      })
    })
    //发起post请求
    $.ajax({
      url: "${pageContext.request.contextPath}/doAjaxInsertSupplierInBatches",
      type: "post",
      //定义发送请求的数据格式为JSON字符串
      contentType: "application/json;charset=UTF-8",
      data: JSON.stringify(data),//将对象转为字符
      dataType: "json",
      success: function (text) {
        alert(text.msg);
      }
    });

  })

  //复制tr节点的内容
  function addElement(x) {
    $(x).parents("tr").clone().appendTo($("#data"));
  }

  //移除tr节点
  function delElement(x) {
    $(x).parents("tr").remove();
  }
</script>
</html>
